
$(document).ready(function(){

    var endPointOptions={
        "url":"http://localhost:9300/GetUserDetails",
         type:"GET",
         dataType:"json",
         timeout:10000,
          success: function(data,status,requestObj)
          {
              var userList= data.UserList;
              var tableDataString= '';
              for(var i=0;i<(userList.length);i++)
              {
                  tableDataString += '<tr><td>' + (i + 1) + '</td><td>'+userList[i].name+'</td><td>'
                  +userList[i].email+'</td><td>' +userList[i].address+'</td><td>'+userList[i].phone+'</td></tr>'

              }

              $('tbody #adding ').append(tableDataString);
          },

          error: function(requestObj,status,error){
              alert('error happened');
          },
          complete: function(requestObj,status){

          }
    };

    var baseUrl=endPointOptions.url;

    endPointOptions.url=baseUrl;
    $.ajax(endPointOptions);

    $('#buttonNavigateUserDetails').click(function(){
        $('#userDetails').load("form.html #formDetails",function(){
            $('#displayEmpDetails').hide();
            $('#btnSubmit').click(function(event){
                var isFormValid=validate();
                if(isFormValid){
                    var formData=prepareData();
                    postEndPoint.data =formData;
                    $.ajax(postEndPoint);
                }
                event.stopPropagation();
                event.preventDefault();
                return false;
            });
        });
    });

    function validate(){
        var userDetailForm=$('#userDetailsForm'),isValid=false;

        userDetailForm.validate(
            {
                onsubmit:false,
                 highlight:function(element,errorClass){
                     var parentDiv=$(element).parents('div.control-group');
                     parentDiv.addClass('error');
                 },

                 unhighlight:function(element,errorClass){
                     if($(element).parent().find('.errorMessage').length==0){
                         var parentDiv=$(element).parents('div.control-group');
                         parentDiv.removeClass('error');
                     }
                 },
                 errorPlacement:function(error,element){
                     var parentDiv=$(element).parents('div.control-group');
                     if(parentDiv.hasClass('disabled')){
                         parentDiv.removeClass('disabled');
                     }
                     var errorParagraph=$('<p class=errorMessage/>');
                     error.appendTo(errorParagraph);
                     if($(element).parent().find('.errorMessage').length>0){
                         $(element).parent().find('.errorMessage').remove();
                     }

                     errorParagraph.insertAfter(element);
                 },

                  success:function(element){
                      var parentDiv=$(element).parents('div.control-group');
                      var elementParentDiv=$(element).parents('p');
                      var classList=elementParentDiv.attr('class').split(/\s+/);
                      var removeItem=false;
                      $.each(classList,function(index,item){
                          if(elementParentDiv.hasClass(item)){
                              removeItem=true;
                          }
                      });

                      if(removeItem){
                          elementParentDiv.remove();
                      }
                  }
            });

           ValidationRules.addRules();

           if(userDetailForm!=null){
               isValid=userDetailForm.valid();
           }
          return isValid;
    }

     function prepareData(){
         var formData = { };
         formData.name = $('#nameInput').val();
         formData.email=$('#emailInput').val();
         formData.address=$('#addressInput').val();
         formData.phone=$('#phoneInput').val();

         return formData;
     }

     var postEndPoint={
          "url": "http://localhost:9300/submitForm",
          type:"POST",
          dataType:'json',
          timeout: 10000,
          success:function(data,status,requestObj){
              alert('message saved successfully');
          },
          error:function(requestObj,status,error){
              alert('error happened');
          },
          complete:function(requestObj,status){

          }
      };

});
